<style>
    #BT_right_header {
        padding: 0 23px;
    }

    .config_header_title {
        line-height: 56px;
        border-bottom: 1px solid #F2F2F2;
        font-size: 16px;
        color: #666;
    }

    .config_text14 {
        font-size: 14px;
    }

    .config_text18 {
        font-size: 18px
    }

    .config_color666 {
        color: #666;
    }

    .config_color999 {
        color: #999;
    }

    .config_colorA5AAB7 {
        color: #A5AAB7
    }

    .config_FW500 {
        font-weight: 500;
    }

    .config_colorFFF {
        color: #fff;
    }

    .config_mr10 {
        margin-right: 10px;
    }

    .config_mr8 {
        margin-right: 8px;
    }

    .inputName {
        margin-bottom: 25px;
    }

    .inputName input {
        margin-left: 20px;
        padding-left: 5px;
        width: 240px;
        height: 34px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 4px 0px rgba(214, 214, 214, 0.75) inset;
        border-radius: 4px;
        border: 1px solid rgba(229, 229, 229, 1);
    }

    .config_round_num {
        display: inline-block;
        width: 21px;
        height: 21px;
        border-radius: 50%;
        background: #565E99;
        /*变色*/
        text-align: center;
        line-height: 21px;
    }

    .config_gradient_blue {
        width: 3px;
        background: linear-gradient(180deg, rgba(86, 94, 153, 1) 0%, rgba(240, 240, 240, 1) 100%);
        /*变色*/
        margin-right: 22px;
    }

    .BT_text_list {
        display: flex;
        padding-left: 9px;
        margin-top: -1px;
    }

    .BT_search {
        display: flex;
        align-items: center;
        position: relative;
        margin-bottom: 20px;
    }

    .BT_content {
        width: 858px;
        height: 442px;
        overflow: hidden;
        overflow-y: auto;
        border-radius: 4px;
        border: 1px solid rgba(229, 229, 229, 1);
    }

    .BT_search span {
        position: absolute;
        left: 10px;
    }

    .BT_search input {
        width: 240px;
        height: 34px;
        background: #F9F9F9;
        border-radius: 4px;
        border: none;
        text-indent: 30px;
        color: #333;
        margin-right: 20px;
    }

    .BT_TextList_detail {
        margin: 20px 0 40px 0;
    }

    .config_table {
        display: flex;
    }
    /* .config_table:nth-child(1) {
        background: #F0F2FF;
    } */

    .config_hoverItem:nth-child(even) {
        background: #F9F9F9
    }

    .config_hoverItem:hover {
        background: #F0F0F7
    }

    .config_table li {
        padding: 0 10px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .config_uploadBut {
        width: 110px;
        height: 34px;
        background: linear-gradient(180deg, rgba(244, 244, 244, 1) 0%, rgba(230, 230, 230, 1) 100%);
        border-radius: 4px;
        border: 1px solid rgba(228, 228, 228, 1);
        text-align: center;
        line-height: 34px;
        margin: 20px 0 23px 32px;
        cursor: pointer;
    }

    .BT_readyonly {
        width: 100%;
        text-align: center;
        background-color: transparent;
        border: none;
        outline: none;
    }

    .BT_isEdit {
        width: 240px;
        height: 34px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 4px 0px rgba(214, 214, 214, 0.75) inset;
        border-radius: 4px;
        border: 1px solid rgba(229, 229, 229, 1);
        text-align: center
    }

    .BT_isEditNot {
        width: 100%;
        height: 34px;
        background-color: transparent;
        text-align: center;
        border: none;
        outline: none;
    }

    #copyInput {
        cursor: default
    }

    .systemContentBox {
        /* height: 400px; */
        /* overflow: hidden; */
        /* overflow-y: auto; */
    }

    .config_uploadfliename {
        margin: 20px 0 20px 32px;
    }

    .config_mask {
        width: 960px;
        height: 1px;
        background: rgba(242, 242, 242, 1);
        margin-bottom: 16px;
    }
</style>

<section id="BT_right_header">
    <div class="config_header_title" style="margin-bottom: 16px">模板配置</div>
    <div class="inputName">
        <span class="config_text14 config_color666">模板名称:</span>
        <input type="text" placeholder="请输入模板名称" v-model="TemplateName">
    </div>
    <div>
        <span class="config_round_num config_colorFFF config_mr10">1</span>
        <span class="config_text18 config_color666 config_mr8 config_FW500">第一步</span>
        <span class="config_text14 config_color999">将系统内容复制替换本地合同模板关键字段</span>
    </div>
    <div class="BT_text_list">
        <div class="config_gradient_blue"></div>
        <div class="BT_TextList_detail">
            <div class="BT_search">
                <span class="icon-Gm-search"></span>
                <input type="text" placeholder="系统名称/自定义名称" v-model="keyword">
                <button type="button" class="btn s-btn-default" @click="searchKey">查询</button>
                <button type="button" class="btn s-btn-default" @click="reset" style="margin-left:10px">重置</button>
            </div>
            <div class="BT_content">
                <ul class="config_table config_colorA5AAB7 dy-flex" style="background:#F0F2FF">
                    <li class="dy-fx-1">序</li>
                    <li class="dy-fx-3">系统名称</li>
                    <li class="dy-fx-4">自定义名称</li>
                    <li class="dy-fx-2">主键ID</li>
                    <li class="dy-fx-2">操作</li>
                </ul>
                <div class="systemContentBox">
                    <ul v-for="(item,index) in systemContent" class="config_table config_hoverItem dy-flex">
                        <li class="dy-fx-1">{{index+1}}</li>
                        <li class="dy-fx-3"><input type="text" v-model="item.fieldName" readonly="readonly" :id="'ready'+index" class="BT_readyonly"></li>
                        <li class="dy-fx-4">
                            <span class="edit-icon icon-Gm-edit" v-show="!item.isShow" @click="item.isShow = true,item.isEdit = true"></span>
                            <input :class="[item.isEdit ?  'BT_isEdit':'BT_isEditNot']" type="text" v-show="item.isShow" v-model="item.nickname" @blur="blurTi(index)" :id="'input'+index" :readonly="!item.isEdit" @click="item.isEdit = true">
                        </li>
                        <li class="dy-fx-2">{{item.templateKey}}</li>
                        <li style="color:#337AB7;" class="copyBtn dy-fx-2">
                            <span style="cursor: pointer;" @click="copyText(index,item.templateKey)" :data-clipboard-target="item.nickname? '#input'+index:'#ready'+index ">复制</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div style="margin-top:-2px">
        <span class="config_round_num config_colorFFF config_mr10">2</span>
        <span class="config_text18 config_color666 config_mr8 config_FW500">第二步</span>
        <span class="config_text14 config_color999">上传编辑后的合同模板</span>
    </div>
    <div class="config_uploadfliename" v-if="fileDetail">
        <span class="icon-Nav-contract-file"></span> {{fileDetail.name}}
    </div>		
    <file-upload
    	:maximum="1"
			:extensions="['docx']"
      v-model="tmpData"
      :post-action="uploadsrc"
      @input-file="inputFile"
			@input-filter="inputFilter"
    >
    	<div class="config_uploadBut" style="margin-bottom: 0px;">{{tmpData.length?'重新上传':'上传合同模板'}}</div>
    </file-upload>
		<div style="color: #ccc; margin-left: 32px;margin-bottom: 15px;">(请上传docx格式的文件)</div>
		
    <div class="config_mask"></div>
    <button type="button" class="btn n-btn-primary mr-10" @click="saveTemplate">保存</button>
    <div class="upload-file-button"></div>
    <input type="text" id="copyInput" v-model="copyInputText" style="opacity:0" readonly>

</section>
<script src="modules/print_template/scripts/clipboard.js" charset="utf-8"></script>
<script src="modules/print_template/scripts/billTemplate_add.js" charset="utf-8"></script>
